<template>
  <div class='earth-search-bar'>
    <n-card title="">
      <n-tabs v-model:value="tabSelName" type="card" tab-style="min-width: 80px;">
        <n-tab-pane :key="'关键字'" :tab="'瓦片数据查询'" :name="'关键字'">
          <n-space>
            <n-select v-model:value="optionTif" :options="options" style="width: 350px; "/>
          </n-space>
          <n-space style="margin-top: 10px">
            <n-input-group style="width: 350px; background-color: rgb(44, 44, 44)">
              <n-input v-model:value="searchValKeyWord"></n-input>
              <n-button type="primary" @click="searchclick('keyword')">搜索</n-button>
            </n-input-group>
          </n-space>
          <div class="xqxList">
            <el-scrollbar>
              <div class="resultList" v-for="item in 10">
                <div class="imageBox">
                  <img src="/assets/sougou.jpg" alt="">
                </div>
                <div class="imgCount">
                  <div class="new1">瓦片数据{{item}}</div>
                  <div class="new2">版本号：20240102</div>
                  <div class="new3">时间：2024-01-02</div>
                </div>
                <div class="lookBox">
                  <div class="iconBox" @click="handShow">
                    <i class="fa fa-eye"></i>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </n-tab-pane>
      </n-tabs>
    </n-card>
    <div>
      <!--<n-space style="width: 150px;margin-left: 10px;">-->
      <!--  &lt;!&ndash;<n-button type="primary" @click="rectangleclick()"> 按照分辨率映射瓦片 </n-button>&ndash;&gt;-->
      <!--  &lt;!&ndash;<n-button type="primary" @click="rectangleclickTj()"> 空白区域向上补齐 </n-button>&ndash;&gt;-->
      <!--  <n-button type="primary" @click="rectangleclick()"> 按照国标分幅 </n-button>-->
      <!--  <n-button type="primary" @click="rectangleclickTj()"> 按照军标分幅 </n-button>-->
      <!--  <n-button type="primary" @click="rectangleclickTj()"> 上传矢量文件分幅 </n-button>-->
      <!--  <n-button type="primary" @click="rectangleclickTj()"> 指定大小裁切 </n-button>-->
      <!--  <n-button type="primary" @click="clearclick()"> 清空 </n-button>-->
      <!--</n-space>-->
    </div>
  </div>
  <!-- 动画组件 -->
  <div style="position: absolute;bottom: 0px;left: 0px;width: 170px;height: 60px;background-color: #44495288;"
    v-if="earthStore.timebarshow">
  </div>
  <div style="position: absolute;bottom: 30px;left: 0px;width: 170px;height: 30px;background-color: #44495288;"
    class="sliderdiv fr timelinespeed" v-if="earthStore.timebarshow">
    <span class="demonstration">速度：</span>
    <el-slider v-model="sliderval" @change="sliderChange" style="width: 115px" size="" />
  </div>
</template>
<script setup>

import { onMounted, ref, onUnmounted, watch } from 'vue'
import plot from './plot/plot.js'
import EarthSearchResult from './earthsearch/earthsearchresult.js'
import NominatimSelect from './NominatimSelect.vue'
import *  as turf from '@turf/turf'

import { useEarthStore } from '@/stores/earth'

import { apiList } from '@/api/apiList'
import { isOK } from '@/utils/resUtils'

import { datalist } from './testData'


const searchValAdministration = ref(null)
function administrationSearchclick(params) {
  searchValAdministration.value = params
  searchclick("administration")
}

const earthStore = useEarthStore()

const searchValKeyWord = ref('')
const tabSelName = ref('关键字')

let p;
setTimeout(() => {
  p = new plot(viewer)
}, 1000);
const optionTif = ref('song1')
const options = ref([
  {
    label: '第一批次',
    value: 'song1'
  },
  {
    label: '第二批次',
    value: 'song2'
  },
  {
    label: '第三批次',
    value: 'song3',
  },
])
const rectangleclick = () => {
  clearclick()
  p.draw({
    type: 'rectanglemark',
    c: (e) => {
      console.log(e);
      //通过接口获取目标
      // var points = turf.randomPoint(25, { bbox: [e.wgs84pos[0]['lng'], e.wgs84pos[0]['lat'], e.wgs84pos[2]['lng'], e.wgs84pos[2]['lat']] })
      // esr.genPoi(points)
      // esr.enableEvent(openMenu)

      apiList
      .queryTarget({
        bbox: [e.wgs84pos[0]['lng'], e.wgs84pos[0]['lat'], e.wgs84pos[2]['lng'], e.wgs84pos[2]['lat']],
        // bbox: [10, 10, 10, 10],
      })
      .then((res) => {
        if (isOK(res)) {
          delete earthStore.pannellist['searchresultpannel']
          setTimeout(() => {
            earthStore.pannellist['searchresultpannel'] = {
              name: 'search-result-pannel',
              options: {
                data: res.result
              }
            }
          }, 0);
          }
        })
      },
      options: {
        clampToGround: true,
        classificationType: Cesium.ClassificationType.BOTH
      }
    })
  }
const rectangleclickTj = () => {
  clearclick()
  p.draw({
    type: 'rectanglemark',
    c: (e) => {
      console.log(e);
      //通过接口获取目标
      // var points = turf.randomPoint(25, { bbox: [e.wgs84pos[0]['lng'], e.wgs84pos[0]['lat'], e.wgs84pos[2]['lng'], e.wgs84pos[2]['lat']] })
      // esr.genPoi(points)
      // esr.enableEvent(openMenu)

      apiList
          .queryTarget({
            bbox: [e.wgs84pos[0]['lng'], e.wgs84pos[0]['lat'], e.wgs84pos[2]['lng'], e.wgs84pos[2]['lat']],
            // bbox: [10, 10, 10, 10],
          })
          .then((res) => {
            if (isOK(res)) {
              delete earthStore.pannellist['seatchCount']
              setTimeout(() => {
                earthStore.pannellist['seatchCount'] = {
                  name: 'seatchCount-pannel',
                  options: {
                    data: res.result
                  }
                }
              }, 0);
            }
          })
    },
    options: {
      clampToGround: true,
      classificationType: Cesium.ClassificationType.BOTH
    }
  })
}
  const clearclick = () => {
    // viewer.entities.removeById('Nominatim_Polygon')
    p.removeall()
    delete earthStore.pannellist['searchresultpannel']
    delete earthStore.pannellist['seatchCount']
  }

  const searchclick = (type) => {

    // 获取结果
    // datalist
    // 清空之前
    delete earthStore.pannellist['searchresultpannel']

    let params = {}
    if (type == 'keyword') {
      params['keywords'] = searchValKeyWord.value
    }else{

    }

    if (type == 'administration' && searchValAdministration.value !== null) {
      let item = searchValAdministration.value
      params['bbox'] = [item.boundingbox[3] * 1,item.boundingbox[1] * 1,item.boundingbox[2] * 1, item.boundingbox[0] * 1]
  }

  setTimeout(() => {
    apiList
      .queryTarget(params)
      .then((res) => {
        if (isOK(res)) {
          delete earthStore.pannellist['searchresultpannel']
          setTimeout(() => {
            earthStore.pannellist['searchresultpannel'] = {
              name: 'search-result-pannel',
              options: {
                data: res.result
              }
            }
          }, 0);
        }
      })
  }, 0);


}

const sliderval = ref(1)

watch(sliderval,(n,o) => {

  viewer.clockViewModel.multiplier = Math.pow(n, 2)
  viewer.timeline.updateFromClock() // 更新timeline时间轴
})

// 时间轴倍率缩放
const sliderChange = (data) => {
  // this.viewer.cesiumWidget.clock
  if (data > 5) {
    // viewer.clockViewModel.multiplier = data * 1000  // data乘以1000是为了效果更明显，这里的1000可以根据项目需求自定
  }else{
  }
  // viewer.clockViewModel.multiplier = Math.pow(data, 2)
  // viewer.timeline.updateFromClock() // 更新timeline时间轴
}

onMounted(() => {

})

</script>
<style lang='scss' scoped>
.timelinespeed {
  // margin:0 auto;
  // width:500px;
}

.timelinespeed .el-slider__stop {
  height: 9px;
  margin-top: -8px;
  width: 2px;
  border-radius: 0;
  background-color: #E4E7ED;
}

.timelinespeed .el-slider__marks-text {
  margin-top: -30px;
}

.timelinespeed .el-slider__button {
  width: 3px !important;
  // height: 14px;
  border-radius: 0px !important;
  // background: url(earthsdk/XbsjCesium/Widgets/Images/TimelineIcons.png) no-repeat center;
  background-color: #409EFF;
  border: 1px solid #409EFF;
  transform: rotate(-0deg) !important;
}

.timelinespeed .el-slider__button.hover,
.el-slider__button:hover {
  transform: rotate(-0deg);
}

.sliderdiv {
  background-color: #44495288;
  border-radius: 3px;
  z-index: 10;

  .demonstration {
    line-height: 30px;
    padding: 0px 3px;
    ;
  }
}

.earth-search-bar {
  position: absolute;
  top: 10px;
  left: 30px;
  z-index: 4;
  display: flex;
}
.xqxList{
  height: 550px;
  overflow: auto;
}
.resultList{
  height:100px;
  display: flex;
  align-items: center;
  padding:0 20px;
  border-radius: 2px;
  .imageBox{
    margin-right:20px;
    width:60px;
    img{
      width:60px;
    }
  }
  .imgCount{
    width:150px;
  }
  .imgOrderNew{
    width:140px;
    text-align: center;
  }
  .lookBox{
    padding: 2px 20px;
    font-size:18px;
    border-left: 1px solid hsla(0,0%,51.8%,.5);
    margin-left:20px;
    .iconBox{
      cursor: pointer;
    }
  }
}
.resultList:nth-child(2n) {
  background: #363636;
}
</style>
